import React, { useState, useEffect, useRef } from 'react';
import { Button } from 'antd';
import { Observable } from 'rxjs-compat/Observable';
import { Subject, BehaviorSubject, ReplaySubject, AsyncSubject } from 'rxjs-compat';
import 'rxjs-compat';
import 'rxjs-compat/add/observable/of';
import 'rxjs-compat/add/operator/map';
import 'rxjs-compat/add/observable/fromEvent';
import 'rxjs-compat/add/operator/scan';
import 'rxjs-compat/add/operator/throttleTime';



export default (props) => {
    let buttonDom = useRef(null)   //设置DOM节点
    useEffect(() => {
        //使用RxJS可以创建一个observable。 dom 事件接管
        // Observable.fromEvent(buttonDom.current, 'click').subscribe(() => {
        //     console.log('点击我了')
        // });

        // 使用RxJS可以隔离状态。
        // Observable.fromEvent(buttonDom.current, 'click')
        //     .scan(count => count + 1, 0)
        //     .subscribe((count ) => {
        //         console.log(count)
        //     });

        // Observable.fromEvent(buttonDom.current, 'click')
        //     .throttleTime(1000)
        //     .scan(count => count + 1, 0)
        //     .subscribe((count) => {
        //         console.log(count)
        //     });

        // Observable.fromEvent(buttonDom.current, 'click')
        //     .throttleTime(1000)
        //     .map(event => event.clientX)
        //     .scan((count, clientX) => count + clientX, 0)
        //     .subscribe((count) => {
        //         console.log(count)
        //     });


        // var observable = Observable.create(function (observer) {
        //     observer.next(1);
        //     observer.next(2);
        //     observer.next(3);
        //     setTimeout(() => {
        //        observer.next(4);
        //        observer.complete();
        //     }, 1000);
        // });


        // observable.subscribe({
        //     next: x => console.log('got value ' + x),
        //     error: err => console.error('something wrong occurred: ' + err),
        //     complete: () => console.log('done'),
        // });


        // var foo = Observable.create(async function (observer) {
        //     console.log('Hello');
        //     observer.next(42);
        //     setTimeout(()=>{observer.next(50)},2000)
        // });

        // foo.subscribe(function (x) {
        //     console.log(x);
        // });
        // foo.subscribe(function (y) {
        //     console.log(y);
        // })

        // var subject = new Subject();

        // subject.subscribe({
        //     next: (v) => console.log('observerA: ' + v)
        // });
        // subject.subscribe({
        //     next: (v) => console.log('observerB: ' + v)
        // })

        // subject.next(1);
        // subject.next(2);


        var subject = new BehaviorSubject();

        subject.next(1)
        subject.next(2)
        subject.next(3)

        subject.subscribe((v) => console.log('observerA: ' + v));
        subject.debounceTime(2000).subscribe((v) => console.log('observerB: ' + v));



        // var subject = new ReplaySubject();
        // subject.subscribe({
        //     next: (v) => console.log('observerA: ' + v)
        // });
        // subject.next(1);
        // subject.next(2);
        // subject.subscribe({     //会执行全部
        //     next: (v) => console.log('observerB: ' + v)
        // });
        // subject.next(3);


        // var subject = new AsyncSubject();

        // subject.subscribe({
        //     next: (v) => console.log('observerA: ' + v)
        // });

        // subject.next(1);
        // subject.next(2);
        // subject.next(3);
        // subject.next(4);

        // subject.subscribe({
        //     next: (v) => console.log('observerB: ' + v)
        // });

        // subject.next(5);
        // subject.complete();


    }, [])
    return (
        <div>
            rxjs
            <Button ref={buttonDom}>
                监听我
            </Button>
        </div>
    );
};